import { Component,useEffect,useState } from 'react'
import { View, Text,Input,Icon,Swiper,SwiperItem,Image } from '@tarojs/components'
import './index.less'
import Taro from '@tarojs/taro'
import React from 'react'
import { connect } from 'react-redux'
import { getBlog,getBlogByTitle,getBanner } from '../../api/blog'
import { create } from '../../actions/user'
class Index extends React.Component {
  state = {
    list: [],
    search: '',
    searching:false,
    searchList:[],
    helpList:[],
    focus:false,
    loading:false,
    noMore:false,
    index:4,
    banners:[]
  }
  componentWillMount(){
    this.getBlogs()
    this.getBanners()
  }

  componentDidUpdate() {
    if(this.props.data.creating){
      this.getBlogs()
      this.props.update(false)
    }
  }

  onReachBottom() {
    this.setState({index:this.state.index+5,loading:true},()=>{
      setTimeout(()=>this.getBlogs(),1000)
    })
  }//底部加载

  onPullDownRefresh() {
    setTimeout(()=>{
      this.getBlogs()
      Taro.stopPullDownRefresh()
    },1000)
  }//下拉刷新

  searchChange = (val) => {
    this.setState({
      search:val
    })
  }
  
  Search = (val) => {
    getBlogByTitle(val)
      .then(res => {
        this.setState({
          searchList:res.data.data,
          search:val
        })
      })
  }

  getBlogs = () => {
    getBlog()
      .then(res=>{
        let data = []
        for(let i = 0;i<=this.state.index&&i<=res.data.data.length;i++){
          if(i == res.data.data.length)this.setState({noMore:true})
          else data.push(res.data.data[i])
        }
        this.setState({list:data,loading:false})
      })
  }

  getBanners = () => {
    getBanner()
      .then(res=>{
        console.log(res.data.data)
        this.setState({banners:res.data.data})
      })
  }

  searchChange = (value) => {
    this.setState({
      search:value
    })
    value!==''&&getBlogByTitle(value)
      .then(res => {
        this.setState({
          helpList:res.data.data,
          searchList:[]
        })
      })
  }

  getDate = (date) => {
    date = new Date(date)
    return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'
  }

  render(){
    const swiper = ['https://t10.baidu.com/it/u=2967197763,1499753582&fm=58',
    'https://t11.baidu.com/it/u=2477613277,471706849&fm=58',
    'https://t12.baidu.com/it/u=2992573373,1781925891&fm=58',
    'https://t11.baidu.com/it/u=1453860025,677139952&fm=58']

    return (
      <View className='index'>
        <View className='searchBox' style={this.state.searching ? { display: 'block' } : { display: 'none' }}>
          {
            this.state.searchList.length?
            this.state.searchList.map(item => (
              <View className="card" onClick={()=>{Taro.navigateTo({ url: '/pages/detail/index?blog_id='+item.blog_id })}}>
                <View className='title'>{item.title}</View>
                <View className='content'>{item.content}</View>
                <View className='info'>博客 | {item.user_data?item.user_data[0].nickname:''} {this.getDate(item.time)}</View>
              </View>
            )):
            this.state.helpList.map(item => (
              <View className="card" onClick={()=>{this.Search(item.title)}}>
                <View className='searchHelp'>{item.title}</View>
              </View>
            ))
          }
        </View>

        <View className='search' onClick={()=>this.setState({searching:true,focus:true})}>
          <Icon class="icon-small" type="search" size="18" color="black"></Icon>
          <Input value={this.state.search}
            onInput={e => {this.searchChange(e.detail.value)}}
            /* focus={this.state.focus}
            onBlur={()=>this.setState({focus:false})} *//>
          <Icon class="icon-small" type="clear" size="18" color="#999"
            style={this.state.searching ? { display: 'inline-block' } : { display: 'none' }}
            onClick={()=>{this.setState({search: '',searchList:[],helpList:[],focus:true})}}></Icon>
        </View>
        {
          this.state.searching?
          <Text className="button" onClick={()=>this.setState({searching:false})}>取消</Text>
          :
          <Image className='photo' src={this.props.data.user_photo}/>
        }
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          vertical={false}
          circular
          indicatorDots
          autoplay>
          {
            this.state.banners.map(item => (
              <SwiperItem>
                <Image src={item.url}/>
              </SwiperItem>
            ))
          }
          
        </Swiper>
        {
          this.state.list.map(item => (
            <View className="card" onClick={()=>{Taro.navigateTo({ url: '/pages/detail/index?blog_id='+item.blog_id })}}>
              <View className='title'>{item.title}</View>
              <View className='content'>{item.content}</View>
              <View className='info'>博客 | {item.user_data?item.user_data[0].nickname:''} {this.getDate(item.time)}</View>
            </View>
          ))
        }
        <View className='bottom' style={this.state.loading ? { display: 'block' } : { display: 'none' }}>加载中...</View>
        <View className='bottom' style={this.state.noMore&&!this.state.loading ? { display: 'block' } : { display: 'none' }}>到底了</View>
      </View>
    )
  }
}

const hoc = connect(({ login }) => ({
  data:login
}), (dispatch) => ({
  update(data){
    dispatch(create(data))
  }
}))

export default hoc(Index)